<template>
    <div class="box">
        <h1>v-for的搜索 及 遍历的方式</h1>
        <!-- 请输入字母: <input type="text" v-model="mytext" @input="InputChange"> -->
        <!--2-->
         请输入字母: <input type="text" v-model="mytext">
       <!--原始的方式 遍历数组-->
        <!-- <ul>
            <li v-for="item in arr" :key="item"> -->
                <!-- <div v-if="item.includes(mytext)">{{ item }}</div> -->
                <!-- {{ item.includes(mytext) ? item : '' }}
            </li>
        </ul> -->
        <!--遍历函数的方式-->
        <ul>
            <li v-for="item in arrInput()" :key="item">
                {{ item }}
            </li>
        </ul>


    </div>

</template>
<script>
export default {
    data() {
        return {
            mytext: '',
            arr: ['abc', 'abb', 'aab', 'aaa', 'bac', 'bba', 'bab', 'bcd'],
            newArr: ['abc', 'abb', 'aab', 'aaa', 'bac', 'bba', 'bab', 'bcd']
        }
    },
    methods: {
        InputChange() {
            //是在当前的数组里面直接覆盖
            //this.arr = this.arr.filter(item => item.includes(this.mytext))
            this.arr = this.newArr.filter(item => item.includes(this.mytext))
        },
        arrInput() {
            return this.arr.filter(item => item.includes(this.mytext))
        }
    }
}

</script>